<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
  <image-upload url="./../upload.s" name="image"></image-upload>
  <hr>
  <image-upload style="height:100px; width: 100px"
                url="../../upload.s" name="image">
    <template ttuploaded="slotProps">
      <img :src="slotProps.path" style="width: 100%; height:100%;
      border-radius:50%; overflow: hidden">
    </template>
  </image-upload>
</div>
<script>
  Vue.component("imageUpload",{
    template:`
    <span style="width: 100px; height: 150px; display: inline-flex;
    border: 1px blue solid; cursor: pointer"
    @click="$refs.file.click()">

    <slot v-if="imagePath" name="uploaded":path="imagePath">
    <img :src="imagePath" style="width: 100%;height: 100%;object-fit:cover">
    </slot>
    <slot v-else name="empty">+</slot>
    <input type="file" ref="file" style="display: none"
    accept="image/*" @change="upload">
    </span>

  `,
    props:["url","name"],
  data(){
      return{
        iamgePath:null,
      }
  },
  methods:{
      upload(){
        let fd=new FormData();
        fd.append(this.name,this.$refs.file.files[0]);
        axios.post(this.url,fd).then(res=>{
          if(res.data.code==1){
            this.iamgePath ="../../"+res.data.data;
          }else {
            alert(res.data.msg)
          }
        })
      }
  }

  })

  var v=new Vue({
    el:"#app"
  })
</script>
</body>
</html>